<template>
  <a-card class="mt-6">
    <template #title> 缴费 </template>
    <a-card>
      <form @submit.prevent="handleSubmit" class="space-y-4">
        <div>
          <label for="amount" class="block text-sm font-medium text-gray-700">
            缴费金额
          </label>
          <a-input
            type="number"
            id="amount"
            v-model.number="amount"
            placeholder="请输入缴费金额"
            :min="0"
            :step="0.01"
            required
            class="mt-1"
          />
        </div>
        <a-button type="primary" html-type="submit">确认缴费</a-button>
      </form>
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Card, Input, Button } from "ant-design-vue";

// 定义一个响应式变量 amount
const amount = ref("");

// 提交表单的处理函数
const handleSubmit = () => {
  // 这里应该调用后端 API 进行实际的缴费操作
  alert(`缴费金额：¥${amount.value}`);
  // 清空输入框
  amount.value = "";
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
